<template>
	<view class="bg">
		<xl-navbar title="TabBar导航栏" fixed shadow></xl-navbar>
		<xl-list-item title="默认读取page.json中的tabBar信息" arrow @click="open(0)"></xl-list-item>
		<xl-list-item title="自定义数据" arrow @click="open(1)"></xl-list-item>
		<xl-list-item title="设置中间按钮：配置pagePath，则跳转" arrow @click="open(2)"></xl-list-item>
		<xl-list-item title="设置中间按钮：配置插槽，则弹窗" arrow @click="open(3)"></xl-list-item>
		<xl-list-item title="设置中间按钮：都不配置，则触发事件" arrow @click="open(4)"></xl-list-item>
		<xl-list-item title="设置不同颜色、背景色" arrow @click="open(5)"></xl-list-item>
		<xl-list-item title="使用图标" arrow @click="open(6)"></xl-list-item>
		<xl-list-item title="使用API请求tabBar数据" arrow @click="open(7)"></xl-list-item>
		
		<xl-tabbar v-show="show[0]"></xl-tabbar>
		<!-- 默认都是page.json中的tabbar数据，如果想自定义，要注意覆盖，不然未设置的值还会使用page.json数据，除非page.json未配置tabbar数据 -->
		<xl-tabbar v-show="show[1]" :list="tabbars1" :midButton="null" selectedColor="#ed6d1f"></xl-tabbar>
		<xl-tabbar v-show="show[2]" :list="tabbars1" :midButton="midButton1" selectedColor="#ed6d1f"></xl-tabbar>
		<xl-tabbar v-show="show[3]" :list="tabbars1" :midButton="midButton2" selectedColor="#ed6d1f">
			<template #default="{ show }">
				<xl-mask :modelValue="show" :clickClose="false" zIndex="99999"></xl-mask>
			</template>
		</xl-tabbar>
		<xl-tabbar v-show="show[4]" :list="tabbars1" :midButton="midButton2" selectedColor="#ed6d1f" @action="action"></xl-tabbar>
		<xl-tabbar v-show="show[5]" :list="tabbars1" :midButton="null" color="#888" selectedColor="#ed6d1f" backgroundColor="#fff1e6"></xl-tabbar>
		<xl-tabbar v-show="show[6]" :list="tabbars2" :midButton="midButton3" selectedColor="#ed6d1f"></xl-tabbar>
		<!-- 注意需要配置getTabBar接口，以及store中配置app.tabBar，提高使用效率 -->
		<xl-tabbar v-show="show[7]" api="getTabBar"></xl-tabbar>
	</view>
</template>

<script setup>
	import { ref, onMounted, computed } from "vue";
	
	const show = ref([false,false,false,false,false,false,false,false])

  // 自定义tabBar导航信息
	const tabbars1 = ref([{
		"pagePath": "sub_pages/pages/component/tabBar",
		"iconPath": "/static/imgs/tabbar/home.png",
		"selectedIconPath": "/static/imgs/tabbar/home-active.png",
		"text": "导航"
	}, {
		"pagePath": "sub_pages/pages/component/tabs",
		"iconPath": "/static/imgs/tabbar/category.png",
		"selectedIconPath": "/static/imgs/tabbar/category-active.png",
		"text": "分类"
	}, {
		"pagePath": "sub_pages/pages/component/navbar",
		"iconPath": "/static/imgs/tabbar/cart.png",
		"selectedIconPath": "/static/imgs/tabbar/cart-active.png",
		"text": "购物车"
	}, {
		"pagePath": "sub_pages/pages/component/grid",
		"iconPath": "/static/imgs/tabbar/user.png",
		"selectedIconPath": "/static/imgs/tabbar/user-active.png",
		"text": "我的"
	}])

  // 使用字体图标，可不需要selectedIconPath，注意如果在page.json中配置字体图标可以用，但小程序会报警告，如果要用字体图标，则需要自定义
  const tabbars2 = ref([{
    "pagePath": "sub_pages/pages/component/tabBar",
    "iconPath": "xl-home",
    "text": "导航"
  }, {
    "pagePath": "sub_pages/pages/component/tabs",
    "iconPath": "xl-type",
    "text": "分类"
  }, {
    "pagePath": "sub_pages/pages/component/navbar",
    "iconPath": "xl-wenda",
    "text": "咨询"
  }, {
    "pagePath": "sub_pages/pages/component/grid",
    "iconPath": "xl-my",
    "text": "我的"
  }])

  // 中间按钮，配置跳转路径、按钮图片
	const midButton1 = ref({
		"pagePath": "sub_pages/pages/component/tabs",
		"iconPath": "/static/imgs/tabbar/vip.png"
	})
  // 中间按钮，配置按钮图片
  const midButton2 = ref({
    "iconPath": "/static/imgs/tabbar/vip.png",
  })
  // 中间按钮，配置按钮图标，需要加字体颜色color，背景色selectedColor
  const midButton3 = ref({
    "iconPath": "xl-tiku",
    "color": "#ffffff",
    "selectedColor": "#ed6d1f"
  })
	
	function open(index){
		show.value.fill(false);
		show.value[index] = true;
	}
	
	
	function action(){
		uni.$xl.toast('点击中间按钮')
	}
</script>

<style lang="scss" scoped>
	.content{
		margin-top: 200rpx;
		height: 300rpx;
		background: #fff;
	}
</style>